<template>
  <div>
    <h1>历史订单</h1>
    <!--下载下载全部列表为xls文件-->
    <div class="download">
      <button @click="download()">下载所选列表为本地xls文件</button>
    </div>
    <br/>
    <!--    表单-->
    <template>
      <div v-show="item.startDateTime <= Today || item.status==3 " class="form" v-for="item in order">
        <div class="orderMessage">
          <!-- `checked` 为 true 或 false -->
          <el-checkbox  v-model="checkList" class="orderNo" :label="item.orderNo"> </el-checkbox>
          <span class="orderNo">预定日期：{{ item.gmtCreate }}</span>
          <div>
            <span class="price">￥{{ item.totalFee }}</span>&nbsp;|
            <span style="font-weight: bold">{{ item.status == 1? '已完成': item.status==3? '已退款' :'已取消'}}</span>
          </div>
        </div>
        <div class="context">
          <div class="title">
            {{ item.startCity }}——{{ item.endCity }}
          </div>
          <div class="date">
            <span>出发时间：{{ item.startDateTime }}&nbsp;{{ item.flightStartTime }}</span>

          </div>
        </div>
      </div>

    </template>
    <!--  分页-->
    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      :current-page="page"
      :page-size="limit"
      :total="total"
      @current-change="init"/>
  </div>
</template>

<script>
import order from '../api/order'
import moment from 'moment'

export default {
  name: "OrderList",
  data() {
    return {
      checkList: [],
      page: 1, // 当前页
      limit: 6, // 每页显示数
      total: 0, // 总记录数
      order: {
        orderNo: '20220624123711813',
        gmtCreate: '2022-06-24',
        startCity: '南京',
        endCity: '常州',
        startDateTime: '2022-06-17',
        flightStartTime: '02:30:00',
        price: '85.4',
        flag: '已完成'
      }
    };
  },
  created() {
    this.init()
  },
  computed: {
    Today() {
      return moment(new Date()).format('yyyy-MM-DD')
    }
  },
  methods: {
    async download() {
      await order.writeData(this.checkList)
        .then(response=>{
          console.log(response.data)
          this.getOutExcel("历史订单",response.data)

        })
    },
    //二进制数据流处理
    getOutExcel(fileName, res) {
      let blob = new Blob([res], { type: "application/vnd.ms-excel" });
        var link = document.createElement("a");
        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL;
        // 创建下载链接
        link.href = url.createObjectURL(blob);
        //命名下载名称
        link.download = fileName;
        //点击触发下载
        link.click();
        //下载完成进行释放
        url.revokeObjectURL(link.href);
    },

    init(page=1) {
      this.page = page
      order.getMyOrder2(this.page,this.limit)
        .then(response => {
          this.total = response.data.data.total
          let orderList2 = response.data.data.rows
          this.order = orderList2
        })
    },
  }
}
</script>

<style scoped>
.download {
  display: flex;
  justify-content: flex-end;
}

.form {
  display: flex;
  flex-direction: column;
  /*background-color: #a4c9cc;*/
  border: #ffffff 1px solid;

}

.orderNo {
  color: #ffffff;
  font-weight: bold;
  font-size: large;
}

.orderMessage {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background-color: #7ebeab;
}

.price {
  color: #e6681a;
  font-size: 20px;
  font-weight: bolder;

}

.context {
  display: flex;
  flex-direction: column;
  margin-left: 20px;

}

.title {
  padding-top: 10px;
  font-size: 18px;
  font-weight: bolder;
  color: #040B1B;
}

.date {
  margin-top: 10px;
  color: #2a88d8;
  font-weight: bolder;

}
</style>
